<template>
  <!--  <u-swiper @click="handleClick" @change="e=>current=e.current" :key-name="keyName" radius="16rpx" circular-->
  <!--            :height="height" :list="swiper">  -->
  <u-swiper @click="handleClick" @change="e=>current=e.current" radius="16rpx" circular
            :height="height" :list="data">
    <template #indicator>
      <view
        class="indicator"
        v-if="data.length>1"
        :style="{marginBottom:bottom}"

      >
        <view
          class="indicator__dot"
          v-for="(item, index) in swiper"
          :key="index"
          :class="{'indicator__dot--active':index === current}"
        >
        </view>
      </view>
    </template>

  </u-swiper>
</template>

<script>
import { loadImage } from "@/utils/File";

export default {
  name: "lr-swiper",
  data(){
    return {
      current: 0
    }
  },
//  computed: {
//    swiper(){
//      return this.data.map(item => {
//        item[this.keyName] = loadImage(item[this.keyName])
//        return item
//      })
//    }
//  },
  props: {
    /**轮播图数据*/
    data: {
      type: Array,
      required: true
    },
    /**banner高度*/
    height: {
      type: String,
      default: '320rpx'
    },
    /**指示器位置*/
    bottom: {
      type: String,
      default: "10rpx"
    },
    /**图片的值*/
    keyName: {
      type: String,
      default: " "
    }
  },
  methods: {
    handleClick(e){
      const item = this.swiper[e];
      if (item.urlType === '商品') {
        uni.navigateTo({
          url: `/subPackages/classify/goodsDetails?id=${item.goodsId}`
        })
        return
      }
      if (item.urlType === '外链') {
        uni.navigateTo({
          url: `/pages/base/webview?path=${item.url}`
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
/**轮播图图指示器*/
.indicator {
  display: flex;
  justify-content: center;

  &__dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #ffffff;

    &--active {
      background: #FD222A;
    }

    & + .indicator__dot {
      margin-left: 20rpx;
    }
  }
}
</style>
